<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>购物车</title>
     <!--  引入重置样式表     reset.css -->
     <link rel="stylesheet" href="../css/reset.css">
     <!-- 引入公共样式表       common.css -->
     <link rel="stylesheet" href="../css/common.css">
     <!-- 引入购物车样式表      cart.css -->
     <link rel="stylesheet" href="../css/cart.css">
</head>
<body>
     <!-- 头部 -->
     <div id="header">
        <div class="container clearfix">
            <p>欢迎来到HOUSE家居网</p>
            <div class="right clearfix">
                <script type="text/html" id = "userInfor">
                {{if data == ''}}
                <a href="login.html" target="_self">登录</a>
                <a href="login.html">注册</a>
                <p class="teltext"><img src="../images/tel.png" alt="">400-00-000xxx</p>
                <p class="mailtext"><img src="../images/mail.png" alt="">1234567xxx@gmail.com</p>
                {{else}}
                <a href="../pages/login.html">{{@username}}</a>
                <p class="teltext"><img src="../images/tel.png" alt="">400-00-000xxx</p>
                <p class="mailtext"><img src="../images/mail.png" alt="">1234567xxx@gmail.com</p>
                {{/if}}
                </script>
            </div>
        </div>
    </div>
    <!-- 导航 -->
    <div id="nav">
        <div class="container">
            <a href="index.html" class="logoimg"></a>
            <div class="nav">
                <ul>
                    <li>
                        <a href="index.html">首页</a>
                        <img src="../images/nav_move.jpg" alt="" class="moveimg">
                    </li>
                    <li><a href="aboutUs.html">关于我们</a>
                        <img src="../images/nav_move.jpg" alt="" class="moveimg1"></li>
                    <li><a href="productList.html">产品展示</a>
                        <img src="../images/nav_move.jpg" alt="" class="moveimg1"></li>
                    <li><a href="newList.html">新闻动态</a>
                        <img src="../images/nav_move.jpg" alt="" class="moveimg1"></li>
                    <li><a href="message.html">在线留言</a>
                        <img src="../images/nav_move.jpg" alt="" class="moveimg1"></li>
                    <li class="last"><a href="contactUs.html">联系我们</a>
                        <img src="../images/nav_move.jpg" alt="" class="moveimg1"></li>
                </ul>
            </div>
        </div>
    </div>

    <!-- 购物车 -->
    <div class="cart">
        <table>
            <!-- 动态tr 购物项 -->
            <script type="text/html" id="cartList">
                <tr>
                    <th><input type="checkbox" name="checkAll" {{stateAll? 'checked':''}}></th>
                    <th>商品图片</th>
                    <th>商品信息</th>
                    <th>单价</th>
                    <th>数量</th>
                    <th>总价</th>
                    <th>操作</th>
                </tr>
                {{ each cartList }}
                <tr>
                    <td><input type="checkbox" name="checkItem" data-index="{{ $value.id }}" {{ $value.state? 'checked':''}}></td>
                    <td><img src="{{ $value.picture }}" alt="pic1"></td>
                    <td>{{ $value.product }}</td>
                    <td>￥{{ $value.price }}</td>
                    <td><input type="button" name="minus" value="-" data-index="{{ $index }}">
                        <input type="text" name="amount" value="{{ $value.num }}" data-index="{{ $index }}">
                        <input type="button" name="plus" value="+" data-index="{{ $index }}">
                    </td>
                    <td>￥{{ $value.singleTotal=($value.price*$value.num) }}</td>
                    <td>
                        <a href="javascript:void(0)" data-index="{{ $value.id }}" class="detail">商品详情</a><br />
                        <a href="javascript:void(0)" data-index="{{ $index }}" class="delete">删除</a>
                    </td>
                </tr>
                {{ /each }}
            </script>
        </table>


        <h3>商品总价:<span class="total-price">￥0</span></h3>
    </div>
    <script src="../static/template-web.js"></script>
    <script src="../static/jquery-3.6.0.js"></script>
    <script src="../js/cart.js"></script>
</body>
</html>